<script setup lang="ts">
import { ref, watch, computed, onMounted } from 'vue'
import { useDialogStore } from '@/stores/dialog'
import GroupBox from '@/components/GroupBox/GroupBox.vue'
import GroupModuleAllRight from '@/components/PermissionsModule/Performance/Group/GroupModuleAllRight.vue'
const dialogStore = useDialogStore()
const { dialogInfo } = dialogStore

const groupBoxRef = ref(null)
let timer = null

// 开始计时
const startTimer = () => {
  timer = setInterval(() => {
    groupBoxRef?.value?.hidden('r-box')
  }, 30000)
}

// 重置计时
const resetTimer = () => {
  clearTimeout(timer)
  if (!dialogInfo.visible) {
    startTimer()
  }
}
window.addEventListener('mousemove', resetTimer)
window.addEventListener('keydown', resetTimer)
window.addEventListener('click', resetTimer)
onMounted(() => {
  startTimer()
})
</script>

<template>
  <GroupBox
    pName="r-box"
    transition="right"
    ref="groupBoxRef"
    :title="$t('bi_finance_performanceoverview')"
  >
    <template #title> {{ $t('bi_finance_performanceoverview') }} </template>
    <template #first>
      <GroupModuleAllRight />
    </template>
    <template #second>
      <GroupModuleAllRight :showRemainingComponents="true" />
    </template>
  </GroupBox>
</template>

<style lang="scss" scoped></style>
